<template>
    <div v-loading="loading">
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;margin-bottom: 20px;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
             <div style="color: #409eff;">返回</div>
        </div>
        <el-dialog :visible.sync="visible" title="提现拒绝原因" width="800px">
            <el-form :model="form">
                <el-form-item label="拒绝原因">
                    <el-input placeholder="请输入提现拒绝原因" style="width: 500px" v-model="form.reason"  type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <template>
            <el-descriptions :column="3" border class="margin-top" title="提现详情">
                <el-descriptions-item>
                    <template slot="label">用户名头像</template>
                    <!-- <div v-if="datas.user_info_more" style="display: flex;align-items: center;">
                        <el-avatar size="medium" :src="datas.user_info_more.avatar" style="margin-right: 10px;"></el-avatar>
                        {{ datas.user_info_more.name }}
                    </div>-->

                    <UserInfo :user_id="datas.user_id" :userInfos="datas.user_info_more" v-if="datas.user_id"></UserInfo>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">ID</template>
                    {{ datas.id }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">用户ID</template>
                    {{ datas.user_id }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">银行卡编码</template>
                    {{ datas.bank_code }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">银行名称</template>
                    {{ datas.bank_name }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">真实姓名</template>
                    {{ datas.real_name }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">银行卡号</template>
                    {{ datas.bank_card }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">开户行地址</template>
                    {{ datas.bank_address }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">提现金额</template>
                    {{ datas.money }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">提现使用金币</template>
                    {{ datas.balance }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">手续费(人民币)</template>
                    {{ datas.fee }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">提现状态</template>
                    <el-tag type="warning" v-if="datas.status == 0">待审核</el-tag>
                    <el-tag type="success" v-else-if="datas.status == 1">已通过</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 2">已拒绝</el-tag>
                </el-descriptions-item>
             

                <el-descriptions-item>
                    <template slot="label">提现时间</template>
                    {{ datas.created_at }}
                </el-descriptions-item>

                <el-descriptions-item  v-if="datas.status == 2">
                    <template slot="label">拒绝时间</template>
                    {{ datas.updated_at }}
                </el-descriptions-item>

                <el-descriptions-item v-if="datas.status == 1">
                    <template slot="label">通过时间</template>
                    {{ datas.updated_at }}
                </el-descriptions-item>
                <el-descriptions-item  v-if="datas.status == 2">
                    <template slot="label">拒绝理由</template>
                    {{ datas.refuse_reason }}
                </el-descriptions-item>
            </el-descriptions>
            <div class="flex align-center jus-flex-start mt-20 pr-30">
                <div v-show="datas.status == 0">
                    <el-popconfirm @confirm="passFun(datas.id, 1)" title="确定要通过吗？">
                        <el-button slot="reference" type="primary" style="padding: 10px 30px"    v-permission="['ADMIN','WITHDRAW_DETAILS_PASS']">通过</el-button>
                    </el-popconfirm>
                    <el-popconfirm @confirm="passFun(datas.id, 2)" title="确定要拒绝吗？">
                        <el-button size="mini" slot="reference" type="danger" style="padding: 10px 30px"   v-permission="['ADMIN','WITHDRAW_DETAILS_REJECT']">拒绝</el-button>
                    </el-popconfirm>
                </div>
                <div v-show="datas.status != 0">
                    <el-tag type="warning" v-if="datas.status == 0">待审核</el-tag>
                    <el-tag type="success" v-else-if="datas.status == 1">已通过</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 2">已拒绝</el-tag>
                </div>
            </div>
        </template>

        <div></div>
    </div>
</template>
      
<script>
export default {
    data() {
        return {
            submitComplete:false,
            visible: false,
            loading: false,
            tabdata: [],
            datas: {},
            form:{
                reason:'',
                refuseId:'',
            },
            
        }
    },
    mounted() {
        //this.getworksList()
        if (this.$route.query.id) {
            console.log('this.$route.query.id', this.$route.query.id)
            this.getWithdrawInfo(this.$route.query.id)
        }
    },
    methods: {
        passFun(id, status) {
            if(status == 2){
                this.visible = true
                this.form.refuseId = id;
                return
            }
            let that = this
            this.$request.put('/user-withdraw/update/' + id, { status: status }).then((res) => {
                this.$message.success('操作成功')
                that.getWithdrawInfo(id)
            })
        },
        closeBox() {
            this.visible = false
        },

        getWithdrawInfo(id) {
            let that = this
            this.$request.get('/user-withdraw/info/' + id).then((res) => {
                that.tabdata = []
                that.datas = res

                console.log('res', res)
                that.tabdata.push(res)
            })
        },

        submit(){
            if(this.submitComplete) return
            this.submitComplete = true
            if(!this.form.reason){
                this.$message.warning("请输入提现拒绝原因！");
                this.submitComplete = false
                return
            }

            let that = this
            this.$request.put('/user-withdraw/update/'+ that.form.refuseId, { status: 2,reason:that.form.reason}).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                 this.closeBox()
                 that.getWithdrawInfo(this.$route.query.id)
            }).catch((error)=>{
                this.submitComplete = false
                });
        },
    },
}
</script>
      
<style lang="scss" >
.el-button--text {
    margin-right: 20px !important;
}

.el-popover {
    width: 250px;
}
</style>